{% load static %}

<script type="text/javascript">
	/*
	  Main resources: 
	  https://www.youtube.com/watch?v=cKIG1lKwLeo&t=401s&ab_channel=HongLy
	  For the ground zero code, see the exported files from here: 
	  https://codepen.io/mikewesthad/pen/BVeoYP?editors=1111 

	  Also worth taking a look: 
	  https://www.youtube.com/watch?v=fdXcD9X4NrQ&ab_channel=MorganPage
	  and 
	  https://www.youtube.com/watch?v=MR2CvWxOEsw&ab_channel=MattWilber
	 */


	// ###########################################################################
	// PREAMBLE
	// ###########################################################################

	// <step> -- one full loop around all three phases determined by <phase> is 
	// a step. We use this to link the steps in the backend. 
	let step = {{step}};
	let sim_code = "{{sim_code}}";
 	let step_size = {{sec_per_step}} * 1000; // 10 seconds = 10000

	// Phaser 3.0 global settings. 
	// Configuration meant to be passed to the main Phaser game instance. 
	const config = {
	  type: Phaser.AUTO,
	  width: 1500,
	  height: 800,
	  parent: "game-container",
	  pixelArt: true,
	  physics: {
	    default: "arcade",
	    arcade: {
	      gravity: { y: 0 } } },
	  scene: {
	    preload: preload,
	    create: create,
	    update: update },
	  scale: {zoom: 0.8} };

	// const config = {
	//   type: Phaser.AUTO,
	//   width: 4480,
	//   height: 3200,
	//   parent: "game-container",
	//   pixelArt: true,
	//   physics: {
	//     default: "arcade",
	//     arcade: {
	//       gravity: { y: 0 } } },
	//   scene: {
	//     preload: preload,
	//     create: create,
	//     update: update },
	//   scale: {zoom: 1} };


	// Creating the game instance and setting up the main Phaser variables that  
	// will be used in it. 
	const game = new Phaser.Game(config);
	let cursors;
	let player;

	// Persona related variables. This should have the name of the persona as its 
	// keys, and the instances of the Persona class as the values.
	let persona_names = {{ persona_init_pos|safe }};
	var spawn_tile_loc = {};
	for (var key in persona_names){
		spawn_tile_loc[key] = persona_names[key] ;
	}

	var personas = {};
	var pronunciatios = {};
	var speech_bubbles = {};
	let anims_direction;
	let pre_anims_direction;
	let pre_anims_direction_dict = {};

	// <tile_width> is the width of one individual tile (tiles are square)
	let tile_width = 32;
	// Important: tile_width % movement_speed has to be 0. 
	// <movement_speed> determines how fast we move at each upate cylce. 
	let movement_speed = {{play_speed}}; 

	// Variables for storing movements that are sent from the backend server.
	let execute_count_max = tile_width/movement_speed;
	let execute_count = execute_count_max;
	let movement_target = {};
	let all_movement = {{ all_movement|safe }};

  let start_datetime =new Date(Date.parse("{{start_datetime}}"));
  var datetime_options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
 	document.getElementById("game-time-content").innerHTML = start_datetime.toLocaleTimeString("en-US", datetime_options);
 	

	// ###########################################################################
	// ENGINE
	// ###########################################################################

	// Joon: Phaser 3.0 is oriented around "scenes" -- recall how Pokemon plays: 
	//       there is the outdoor space, and then there is the indoor space; when
	//       you go inside, you transition to a new "scene" and the outdoor space
	//       basically disappears. 
	//       A scene in Phaser has four key methods that are called at different
	//       stages of rendering for different purposes. They are: 
	//       init() -> preload() -> create() -> update()
	//         init() is called only once at the very beginning. This is the 
	//           initialization function in case that is needed. 
	//         preload() is called once and preloads any of the assets
	//         create() is also called once after preloading... creates sprites 
	//           and actually displays stuff
	//         update() is called on each frame during the game play 

	function preload() {  
		// For managing cross origin errors. We need to set this, change AWS 
		// CORS settings, and django AWS settings. 
		this.load.crossOrigin = '';

	  // Loading the necessary images (e.g., the background image, character 
	  // sprites). 
	  // Joon: for load.image, the first parameter is simply the key value that
	  //       you are passing in. The second parameter should be pointed to the
	  //       png file that contains the tileset. 
	  //       Also IMPORTANT: when you create a tileset in Tiled, always be  
	  //       sure to check the "embedded" option. 
	  this.load.image("blocks_1", "{% static 'assets/the_ville/visuals/map_assets/blocks/blocks_1.png' %}");
	  this.load.image("walls", "{% static 'assets/the_ville/visuals/map_assets/v1/Room_Builder_32x32.png' %}");
	  this.load.image("interiors_pt1", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt1.png' %}");
	  this.load.image("interiors_pt2", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt2.png' %}");
	  this.load.image("interiors_pt3", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt3.png' %}");
	  this.load.image("interiors_pt4", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt4.png' %}");
	  this.load.image("interiors_pt5", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt5.png' %}");
	  this.load.image("CuteRPG_Field_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_B.png' %}");
	  this.load.image("CuteRPG_Field_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_C.png' %}");
	  this.load.image("CuteRPG_Harbor_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Harbor_C.png' %}");
	  this.load.image("CuteRPG_Village_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Village_B.png' %}");
	  this.load.image("CuteRPG_Forest_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Forest_B.png' %}");
	  this.load.image("CuteRPG_Desert_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Desert_C.png' %}");
	  this.load.image("CuteRPG_Mountains_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Mountains_B.png' %}");
	  this.load.image("CuteRPG_Desert_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Desert_B.png' %}");
	  this.load.image("CuteRPG_Forest_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Forest_C.png' %}");

	  // Joon: This is the export json file you get from Tiled. 
	  this.load.tilemapTiledJSON("map", "{% static 'assets/the_ville/visuals/the_ville_jan7.json' %}");

	  // An atlas is a way to pack multiple images together into one texture. I'm 
	  // using it to load all the player animations (walking left, walking right, 
	  // etc.) in one image. For more info see:
	  // https://labs.phaser.io/view.html?src=src/animation/texture%20atlas%20animation.js
	  // If you don't use an atlas, you can do the same thing with a spritesheet, 
	  // see: https://labs.phaser.io/view.html?src=src/animation/single%20sprite%20sheet.js
	  // Joon: Technically, I think this guy had the best tutorial for atlas: 
	  //       https://www.youtube.com/watch?v=fdXcD9X4NrQ&ab_channel=MorganPage
	  this.load.atlas("atlas", "{% static 'assets/characters/Yuriko_Yamamoto.png' %}", 
	  												     "{% static 'assets/characters/atlas.json' %}");

	  {% for p in persona_names %}
		  {% with 'assets/characters/'|add:p.underscore|add:'.png' as image_static %}
			  this.load.atlas("{{p.underscore}}", "{% static image_static %}", 
		  										  		     "{% static 'assets/characters/atlas.json' %}");
			{% endwith %}
	  {% endfor %}

	  this.load.image('speech_bubble', "{% static 'assets/speech_bubble/v3.png' %}");
	}

	function create() {  
	  const map = this.make.tilemap({ key: "map" });
	  // Joon: Logging map is really helpful for debugging here: 
	  //       console.log(map);

	  // The first parameter is the name you gave to the tileset in Tiled and then
	  // the key of the tileset image in Phaser's cache (i.e. the name you used in
	  // preload)
	  // Joon: for the first parameter here, really take a look at the 
	  //       console.log(map) output. You need to make sure that the name 
	  //       matches.
	  const collisions = map.addTilesetImage("blocks", "blocks_1");
	  const walls = map.addTilesetImage("Room_Builder_32x32", "walls");
	  const interiors_pt1 = map.addTilesetImage("interiors_pt1", "interiors_pt1");
	  const interiors_pt2 = map.addTilesetImage("interiors_pt2", "interiors_pt2");
	  const interiors_pt3 = map.addTilesetImage("interiors_pt3", "interiors_pt3");
	  const interiors_pt4 = map.addTilesetImage("interiors_pt4", "interiors_pt4");
	  const interiors_pt5 = map.addTilesetImage("interiors_pt5", "interiors_pt5");
	  const CuteRPG_Field_B = map.addTilesetImage("CuteRPG_Field_B", "CuteRPG_Field_B");
	  const CuteRPG_Field_C = map.addTilesetImage("CuteRPG_Field_C", "CuteRPG_Field_C");
	  const CuteRPG_Harbor_C = map.addTilesetImage("CuteRPG_Harbor_C", "CuteRPG_Harbor_C");
	  const CuteRPG_Village_B = map.addTilesetImage("CuteRPG_Village_B", "CuteRPG_Village_B");
	  const CuteRPG_Forest_B = map.addTilesetImage("CuteRPG_Forest_B", "CuteRPG_Forest_B");
	  const CuteRPG_Desert_C = map.addTilesetImage("CuteRPG_Desert_C", "CuteRPG_Desert_C");
	  const CuteRPG_Mountains_B = map.addTilesetImage("CuteRPG_Mountains_B", "CuteRPG_Mountains_B");
	  const CuteRPG_Desert_B = map.addTilesetImage("CuteRPG_Desert_B", "CuteRPG_Desert_B");
	  const CuteRPG_Forest_C = map.addTilesetImage("CuteRPG_Forest_C", "CuteRPG_Forest_C");

	  // The first parameter is the layer name (or index) taken from Tiled, the 
	  // second parameter is the tileset you set above, and the final two 
	  // parameters are the x, y coordinate. 
	  // Joon: The "layer name" that comes as the first parameter value  
	  //       literally is taken from our Tiled layer name. So to find out what
	  //       they are; you actually need to open up tiled and see how you 
	  //       named things there. 
	  let tileset_group_1 = [CuteRPG_Field_B, CuteRPG_Field_C, CuteRPG_Harbor_C, CuteRPG_Village_B, 
	  											 CuteRPG_Forest_B, CuteRPG_Desert_C, CuteRPG_Mountains_B, CuteRPG_Desert_B, CuteRPG_Forest_C,
	  											 interiors_pt1, interiors_pt2, interiors_pt3, interiors_pt4, interiors_pt5, walls];
	  const bottomGroundLayer = map.createLayer("Bottom Ground", tileset_group_1, 0, 0);
	  const exteriorGroundLayer = map.createLayer("Exterior Ground", tileset_group_1, 0, 0);
	  const exteriorDecorationL1Layer = map.createLayer("Exterior Decoration L1", tileset_group_1, 0, 0);
	  const exteriorDecorationL2Layer = map.createLayer("Exterior Decoration L2", tileset_group_1, 0, 0);
	  const interiorGroundLayer = map.createLayer("Interior Ground", tileset_group_1, 0, 0);
	  const wallLayer = map.createLayer("Wall", [CuteRPG_Field_C, walls], 0, 0);
	  const interiorFurnitureL1Layer = map.createLayer("Interior Furniture L1", tileset_group_1, 0, 0);
	  const interiorFurnitureL2Layer = map.createLayer("Interior Furniture L2 ", tileset_group_1, 0, 0);
	  const foregroundL1Layer = map.createLayer("Foreground L1", tileset_group_1, 0, 0);
	  const foregroundL2Layer = map.createLayer("Foreground L2", tileset_group_1, 0, 0);

	  const collisionsLayer = map.createLayer("Collisions", collisions, 0, 0);
	  // const groundLayer = map.createLayer("Ground", walls, 0, 0);
	  // const indoorGroundLayer = map.createLayer("Indoor Ground", walls, 0, 0);
	  // const wallsLayer = map.createLayer("Walls", walls, 0, 0);
	  // const interiorsLayer = map.createLayer("Furnitures", interiors, 0, 0);
	  // const builtInLayer = map.createLayer("Built-ins", interiors, 0, 0);
	  // const appliancesLayer = map.createLayer("Appliances", interiors, 0, 0);
	  // const foregroundLayer = map.createLayer("Foreground", interiors, 0, 0);

	  // Joon : This is where you want to create a custom field for the tileset
	  //        in Tiled. Take a look at this guy's tutorial: 
	  //        https://www.youtube.com/watch?v=MR2CvWxOEsw&ab_channel=MattWilber
	  collisionsLayer.setCollisionByProperty({ collide: true });
	  // By default, everything gets depth sorted on the screen in the order we 
	  // created things. Here, we want the "Above Player" layer to sit on top of 
	  // the player, so we explicitly give it a depth. Higher depths will sit on 
	  // top of lower depth objects.
	  // Collisions layer should get a negative depth since we do not want to see
	  // it. 
	  collisionsLayer.setDepth(-1);
	  foregroundL1Layer.setDepth(2);
	  foregroundL2Layer.setDepth(2);

	  // *** SET UP CAMERA *** 
	  // "player" is to be set as the center of mass for our "camera." We 
	  // basically create a game character sprite as we would for our personas 
	  // but we move it to depth -1 and let it pass through the collision map;  
	  // that is, do not have the following line: 
	  // this.physics.add.collider(player, collisionsLayer);
	  // OLD NOTE: Create a sprite with physics enabled via the physics system. 
	  // The image  used for the sprite has a bit of whitespace, so I'm using 
	  // setSize & setOffset to control the size of the player's body.
	  player = this.physics.add.
	                sprite(2400, 588, "atlas", "down").
	                setSize(30, 40).
	                setOffset(0, 0);
	  player.setDepth(-1);
	  // Setting up the camera. 
	  const camera = this.cameras.main;
	  camera.startFollow(player);
	  camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
	  cursors = this.input.keyboard.createCursorKeys();

	  // *** SET UP PERSONAS *** 
	  // We start by creating the game sprite objects. 
	  for (let i=0; i<Object.keys(spawn_tile_loc).length; i++) { 
	    let persona_name = Object.keys(spawn_tile_loc)[i];
	    let start_pos = [spawn_tile_loc[persona_name][0] * tile_width + tile_width / 2, 
	                     spawn_tile_loc[persona_name][1] * tile_width + tile_width];
	    let new_sprite = this.physics.add
	                         .sprite(start_pos[0], start_pos[1], persona_name, "down")
	                         .setSize(30, 40)
	                         .setOffset(0, 0);
	    // Scale up the sprite
      new_sprite.displayWidth = 40;
      new_sprite.scaleY = new_sprite.scaleX;

	    // Here, we are creating the persona and its pronunciatio sprites.
	    personas[persona_name] = new_sprite;
	    speech_bubbles[persona_name] = this.add.image(new_sprite.body.x - 0, 
	    																						  new_sprite.body.y - 30,
	    																						  'speech_bubble').setDepth(3);
      speech_bubbles[persona_name].displayWidth = 130;
      speech_bubbles[persona_name].displayHeight = 58;

	    pronunciatios[persona_name] = this.add.text(
	                                   new_sprite.body.x - 6, 
	                                   new_sprite.body.y - 42, 
	                                   "🦁", {
	                                   font: "24px monospace", 
	                                   fill: "#000000", 
	                                   padding: { x: 8, y: 8}, 
	                                   border:"solid",
	                                   borderRadius:"10px"}).setDepth(3);
	  }

	  // Create the player's walking animations from the texture atlas. These are
	  // stored in the global animation manager so any sprite can access them.
	  const anims = this.anims;
		for (let i=0; i<Object.keys(persona_names).length; i++) { 
			let persona_name = Object.keys(persona_names)[i];
			let left_walk_name = persona_name + "-left-walk";
			let right_walk_name = persona_name + "-right-walk";
			let down_walk_name = persona_name + "-down-walk";
			let up_walk_name = persona_name + "-up-walk";

			console.log(persona_name, left_walk_name, "DEUBG")
		  anims.create({
		    key: left_walk_name,
		    frames: anims.generateFrameNames(persona_name, { prefix: "left-walk.", start: 0, end: 3, zeroPad: 3 }),
		    frameRate: 4,
		    repeat: -1 });

		  anims.create({
		    key: right_walk_name,
		    frames: anims.generateFrameNames(persona_name, { prefix: "right-walk.", start: 0, end: 3, zeroPad: 3 }),
		    frameRate: 4,
		    repeat: -1 });

		  anims.create({
		    key: down_walk_name,
		    frames: anims.generateFrameNames(persona_name, { prefix: "down-walk.", start: 0, end: 3, zeroPad: 3 }),
		    frameRate: 4,
		    repeat: -1 });

		  anims.create({
		    key: up_walk_name,
		    frames: anims.generateFrameNames(persona_name, { prefix: "up-walk.", start: 0, end: 3, zeroPad: 3 }),
		    frameRate: 4,
		    repeat: -1 });
	  }
	}


	function update(time, delta) {
		// *** SETUP PLAY AND PAUSE BUTTON *** 
		let play_context = this;
		function game_resume() {  
			play_context.scene.resume();
		}  
		play_button.onclick = function(){
			game_resume();
		};
		function game_pause() {  
			play_context.scene.pause();
		}  
		pause_button.onclick = function(){
			game_pause();
		};

	  // *** MOVE CAMERA *** 
	  // This is where we finish up the camera setting we started in the create() 
	  // function. We set the movement speed of the camera and wire up the keys to
	  // map to the actual movement.
	  const camera_speed = 400;
	  // Stop any previous movement from the last frame
	  player.body.setVelocity(0);
	  if (cursors.left.isDown) {
	    player.body.setVelocityX(-camera_speed);
	  } 
	  if (cursors.right.isDown) {
	    player.body.setVelocityX(camera_speed);
	  } 
	  if (cursors.up.isDown) {
	    player.body.setVelocityY(-camera_speed);
	  } 
	  if (cursors.down.isDown) {
	    player.body.setVelocityY(camera_speed);
	  }

	  
	  let curr_focused_persona = document.getElementById("temp_focus").textContent;
	  if (curr_focused_persona != "") {
	  	player.body.x = personas[curr_focused_persona].body.x;
	  	player.body.y = personas[curr_focused_persona].body.y;
	  	document.getElementById("temp_focus").innerHTML = "";
	  }



	  // *** MOVING PERSONAS ***
	 	for (let i=0; i<Object.keys(personas).length; i++) {
	 		let curr_persona_name = Object.keys(personas)[i];
    	let curr_persona = personas[curr_persona_name];
    	let curr_pronunciatio = pronunciatios[Object.keys(personas)[i]];
    	let curr_speech_bubble = speech_bubbles[Object.keys(personas)[i]];

    	if (curr_persona_name.replace("_", " ") in all_movement[step]) {
    		if (execute_count == execute_count_max) { 
    			let curr_x = all_movement[step][curr_persona_name.replace("_", " ")]["movement"][0]
	        let curr_y = all_movement[step][curr_persona_name.replace("_", " ")]["movement"][1]
    			movement_target[curr_persona_name] = [curr_x * tile_width, 
	                                              curr_y * tile_width]; 
	        let pronunciatio_content = all_movement[step][curr_persona_name.replace("_", " ")]["pronunciatio"];
	        let description_content = all_movement[step][curr_persona_name.replace("_", " ")]["description"];
	        let chat_content_raw = all_movement[step][curr_persona_name.replace("_", " ")]["chat"];

	        let chat_content = "";
	        if (chat_content_raw != null ){
		        for (let j=0; j<chat_content_raw.length; j++) { 
		        	chat_content += chat_content_raw[j][0] + ": " + chat_content_raw[j][1] + "<br>"
		        }
		      } else {
		      	chat_content = "<em>None at the moment</em>"
		      }

	       	// This is what gives the pronunciatio balloon the name initials. We 
	        // use regex to extract the initials of the personas. 
	        // E.g., "Dolores Murphy" -> "DM"
	        let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
	        let initials = [...curr_persona_name.matchAll(rgx)] || [];
	        initials = (
	          (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
	        ).toUpperCase();
	        pronunciatios[curr_persona_name].setText(initials + ": " + pronunciatio_content);

	        // Updating the status of each personas 
	        document.getElementById("quick_emoji-"+curr_persona_name).innerHTML = pronunciatio_content;
	        document.getElementById("current_action__"+curr_persona_name).innerHTML = description_content.split("@")[0];
	        document.getElementById("target_address__"+curr_persona_name).innerHTML = description_content.split("@")[1];
	        document.getElementById("chat__"+curr_persona_name).innerHTML = chat_content;
    		}

    		if (execute_count > 0) {
    			if (curr_persona.body.x < movement_target[curr_persona_name][0]) {
	          curr_persona.body.x += movement_speed; 
	          anims_direction = "r";
	          pre_anims_direction = "r"
	          pre_anims_direction_dict[curr_persona_name] = "r"
	        } else if (curr_persona.body.x > movement_target[curr_persona_name][0]) {
	          curr_persona.body.x -= movement_speed; 
	          anims_direction = "l";
	          pre_anims_direction = "l"
	          pre_anims_direction_dict[curr_persona_name] = "l"
	        } else if (curr_persona.body.y < movement_target[curr_persona_name][1]) {
	          curr_persona.body.y += movement_speed;
	          anims_direction = "d";
	          pre_anims_direction = "d"
	          pre_anims_direction_dict[curr_persona_name] = "d"
	        } else if (curr_persona.body.y > movement_target[curr_persona_name][1]) {
	          curr_persona.body.y -= movement_speed;
	          anims_direction = "u";
	          pre_anims_direction = "u"
	          pre_anims_direction_dict[curr_persona_name] = "u"
	        } else {
	        	anims_direction = "";
	        }

	        curr_pronunciatio.x = curr_persona.body.x + 18; 
          curr_pronunciatio.y = curr_persona.body.y - 42 - 25; // DEBUG 1 --- I added 32 offset on Dec 29. 
          curr_speech_bubble.x = curr_persona.body.x + 80; 
          curr_speech_bubble.y = curr_persona.body.y - 39;

          let left_walk_name = curr_persona_name + "-left-walk";
					let right_walk_name = curr_persona_name + "-right-walk";
					let down_walk_name = curr_persona_name + "-down-walk";
					let up_walk_name = curr_persona_name + "-up-walk";
          if (anims_direction == "l") {
			      curr_persona.anims.play(left_walk_name, true);
			    } else if (anims_direction == "r") {
			      curr_persona.anims.play(right_walk_name, true);
			    } else if (anims_direction == "u") {
			      curr_persona.anims.play(up_walk_name, true);
			    } else if (anims_direction == "d") {
			      curr_persona.anims.play(down_walk_name, true);
			    };
    		}
    	} else { 
    		curr_persona.anims.stop();
	      // If we were moving, pick an idle frame to use
	      if (pre_anims_direction_dict[curr_persona_name] == "l") curr_persona.setTexture(curr_persona_name, "left"); else
	      if (pre_anims_direction_dict[curr_persona_name] == "r") curr_persona.setTexture(curr_persona_name, "right"); else
	      if (pre_anims_direction_dict[curr_persona_name] == "u") curr_persona.setTexture(curr_persona_name, "up"); else
	      if (pre_anims_direction_dict[curr_persona_name] == "d") curr_persona.setTexture(curr_persona_name, "down");
    	}
	 	}

	  if (execute_count == 0) {
		  for (let i=0; i<Object.keys(personas).length; i++) {
	      let curr_persona_name = Object.keys(personas)[i]
	      let curr_persona = personas[curr_persona_name];
	      curr_persona.body.x = movement_target[curr_persona_name][0];
	      curr_persona.body.y = movement_target[curr_persona_name][1];
	    }
			execute_count = execute_count_max + 1;
	    step = step + 1;

	    start_datetime = new Date(start_datetime.getTime() + step_size);
 			document.getElementById("game-time-content").innerHTML = start_datetime.toLocaleTimeString("en-US", datetime_options);
    }

	  execute_count -= 1;
	}

	// Control button binders
	var play_button=document.getElementById("play_button");
	var pause_button=document.getElementById("pause_button");
</script>





































